﻿@model IEnumerable<RandomDataItem>
@{
    //ViewBag.Title = "Random data";
}
<h2>@ViewBag.Title</h2>
<div class="proggy-form-div proggy-rnd">
    <div class="proggy-rnd-top">
        <div class="proggy-rnd-top-left">
            <p>
                @Html.ActionLink("Create new", "Create", null, new { @class = "proggy-button-go" })
            </p>
        </div>
        <div class="proggy-rnd-top-right">
            @using (Html.BeginRouteForm(null, FormMethod.Get))
            { 
                <p>
                    @Html.DropDownList("categoryAlias", ViewBag.Categories as IEnumerable<SelectListItem>)
                    <input type="submit" value="Filter" class="proggy-button-go" />@*
                    @Html.ActionLink("Clear filter", "Index", null, new { @class = "proggy-button-stop" })*@
                </p>
            }
        </div>
        @Html.Clear()
    </div>
    <table class="proggy-datatable">
        <thead>
            <tr>
                <th>
                    Unique name
                </th>
                <th>
                    Category alias
                </th>
                <th class="proggy-rnd-value">
                    Data value
                </th>
                <th>
                    &nbsp;
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            { 
                <tr>
                    <td>
                        @item.RandomDataItemId
                    </td>
                    <td>
                        @item.CategoryAlias
                    </td>
                    <td class="proggy-rnd-value">
                        @item.Value
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { dataId = item.RandomDataItemId }) | @Html.ActionLink("Delete", "Delete", new { dataId = item.RandomDataItemId })
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
<script type="text/javascript">

    // onload
    jQuery(function () {

        // find form
        var form = jQuery("div.proggy-rnd-top-right:first").find("form:first");

        // find select list
        var select = form.find("select#categoryAlias:first");

        // find the button
        var button = form.find("input");

        // remove button
        button.remove();

        // bind
        select.change(function () {
            form.trigger("submit");
        });

    });
</script>
